<template>
  <el-tabs v-model="activeTab" type="border-card" class="demo-tabs" @tab-click="activTabMethod">
    <el-tab-pane name="tab1">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <calendar />
          </el-icon>
          <span>系统日志</span>
        </span>
      </template>

      <el-input v-model="syslogtext" class="elinput" :autosize="{ minRows: 10, maxRows: 20 }" type="textarea"
        placeholder="系统日志" />
    </el-tab-pane>


    <el-tab-pane label="Config" name="tab2">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <calendar />
          </el-icon>
          <span>脚本日志</span>
        </span>
      </template>
      <!-- 
      <el-input v-model="cmdLog" class="elinput" :autosize="{ minRows: 10, maxRows: 20 }" type="textarea"
        placeholder="脚本日志" /> -->

        <!-- 
        id INTEGER PRIMARY KEY, job_command TEXT, execution_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,execution_result TEXT
        -->
      <el-table :data="execTableData" style="width: 100%;" height="500">
        <el-table-column prop="id" label="id"  sortable  />
        <el-table-column prop="job_command" label="job_command"  sortable />
        <el-table-column prop="execution_time" label="execution_time"  sortable />
        <el-table-column prop="execution_result" label="execution_result"  sortable show-overflow-tooltip />
      </el-table>

    </el-tab-pane>

    <el-tab-pane label="ps" name="tab3">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <calendar />
          </el-icon>
          <span>系统任务</span>
        </span>
      </template>

      <el-table :data="tableData" stripe style="width: 100%;" height="500">
        <el-table-column prop="USER" label="USER" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="PID" label="PID" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="CPU" label="CPU" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="MEM" label="MEM" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="COMMAND" label="COMMAND" width="300" show-overflow-tooltip />
        <el-table-column prop="VSZ" label="VSZ" sortable show-overflow-tooltip />
        <el-table-column prop="RSS" label="RSS" sortable show-overflow-tooltip />
        <el-table-column prop="TT" label="TT" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="STAT" label="STAT" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="STARTED" label="STARTED" width="100%" sortable show-overflow-tooltip />
        <el-table-column prop="TIME" label="TIME" width="100%" sortable show-overflow-tooltip />
      </el-table>

      <!-- <el-input v-model="sysTaskAll" class="elinput" :autosize="{ minRows: 10, maxRows: 20 }" type="textarea"
        placeholder="系统任务" /> -->
    </el-tab-pane>

  </el-tabs>

  <el-button type="primary" @click="querySysLog">查询</el-button>
</template>

<script>

export default {
  data() {
    return {
      activeTab: 'tab1',
      syslogtext: 'dd',
      cmdLog: 'aa',
      // sysTaskAll: '',
      tableData: [],
      tabPaneName: '',
      execTableData: []
    }
  },
  methods: {
    psAll() {
      //查询当前系统任务
      window.electron.ipcRenderer.invoke('ps:all')
        .then((stdout) => {
          if (stdout) {
            //解析ps命令
            let arr = stdout.split('\n');
            let tableData = [];
            for (let i = 1; i < arr.length; i++) {
              // console.log(arr[i])
              let item = arr[i].split(/\s+/);
              tableData.push({
                USER: item[0],
                PID: item[1],
                CPU: item[2],
                MEM: item[3],
                VSZ: item[4],
                RSS: item[5],
                TT: item[6],
                STAT: item[7],
                STARTED: item[8],
                TIME: item[9],
                COMMAND: item[10]
              })
            }
            this.tableData = tableData;
            // this.sysTaskAll = stdout;
          } else {
            // this.sysTaskAll = err;
            this.tableData = [
              {
                USER: 'err',
                PID: 'err',
                CPU: 'err',
                MEM: 'err',
                VSZ: 'err',
                RSS: 'err',
                TT: 'err',
                STAT: 'err',
                STARTED: 'err',
                COMMAND: 'err'
              }
            ]
          }
        })
        .catch((err) => {
          console.error('读取文件错误', err)
        });
    },
    querySysLog() {
      //从日志文件中读取最近50行的数据
      window.electron.ipcRenderer.invoke('syslog').then((log) => {
        console.log(log);
        this.syslogtext = log.join('\n');
      }).catch((err) => {
        console.error('读取文件错误', err)
      });
    },
    queryExecTable() {
      //获取脚本执行记录
      window.electron.ipcRenderer.invoke('execTable', "query:SELECT * FROM exec_info_table;").then((data) => {
        console.log(data);
        this.execTableData = data;
      }).catch((err) => {
        console.error('获取脚本执行记录错误', err)
      });
    },
    activTabMethod(tab) {
      console.log(tab, tab.paneName);
      if (tab.paneName == 'tab3') {
        this.psAll();
      } else if (tab.paneName == 'tab2') {
        this.queryExecTable();
      }
      this.tabPaneName = tab.paneName;
    }
  },
  mounted() {
    this.querySysLog();
    if (this.tabPaneName === 'tab3') {
      this.psAll();
    } else if (this.paneName == 'tab2') {
      this.queryExecTable();
    }

  }

}
</script>

<style>
.elinput {
  width: 100%;
  /* background-color: red; */
  height: 100%;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>